<!-- 商城订单 -->
<template>
  <div>
    <div v-if="detail">
      <div class="gl_mb_20">
        <el-divider content-position="left">
          <span class="divider_title">明细</span>
        </el-divider>
        <el-table :data="detail.ReceiptDetails" size="mini">
          <el-table-column type="index" label="序号" :width="70" align="center" />
          <el-table-column prop="Name" label="商品信息">
            <template slot-scope="{ row }">
              <div class="gl_dis_ib gl_middle order_img">
                <img v-if="row.ImageUrl" :src="getStaticFileUrl(row.ImageUrl)" alt="" style="width:100%;height:100%">
              </div>
              <div :title="row.ProductName" class="gl_dis_ib gl_middle gl_mx_5 gl_ellipsis" style="width: calc(100% - 40px - 5px - 160px)">
                {{ row.ProductName }}
              </div>
              <div class="gl_dis_ib gl_middle">{{ row.Color }} {{ row.Size }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="Price" label="单价" :width="160">
            <template slot-scope="{row}">
              <span>¥{{ (row.Price / 100).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Count" label="数量" :width="120" />
          <el-table-column prop="Amount" label="小计" :width="180">
            <template slot-scope="{row}">
              <span>¥{{ (row.Amount / 100).toFixed(2) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 总计 -->
      <template>
        <el-row class="summary_wrap" type="flex" justify="end">
          <el-col :span="4">
            <ul class="summary_list">
              <li class="summary_item summary_total gl_clear">
                <span class="gl_fl">实际需支付：</span>
                <span class="gl_fr">{{ (payAmount / 100).toFixed(2) }} 元</span>
              </li>
            </ul>
          </el-col>
        </el-row>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    detail: {
      type: Object,
      default: () => {}
    },
    payAmount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {};
  },
  methods: {
    // 图片回显
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style scoped>
.divider_title {
  font-size: 16px;
  color: #353434;
  font-weight: bold;
  line-height: 20px;
}
.text {
  font-size: 14px;
  color: #353434;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 12px;
}
.money_color {
  color: #f56c6c;
}
.el-table,.el-table /deep/ .el-table__body-wrapper {
  min-height: auto;
}
.order_img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  overflow: hidden;
}
.summary_item {
  font-size: 14px;
  color: #353434;
  line-height: 24px;
}
.summary_item.summary_total {
  font-weight: bold;
}
</style>
